<!--
 * @Descripttion : 
 * @version      : 
 * @Author       : zero
 * @Date         : 2021-06-05 18:04:31
 * @LastEditors  : zero
 * @LastEditTime : 2021-06-08 11:08:58
-->

<template>
  <div
    class="warp"
    :class="[
      status == 1 && !isEnd
        ? 'coming'
        : status == 1 && isEnd
        ? 'suspend'
        : status == 2
        ? 'end'
        : 'will',
    ]"
    :status="status"
    :endTime="endTime"
  >
    {{
      status == 1 && !isEnd
        ? 'Betting in progress'
        : status == 1 && isEnd
        ? 'Betting suspended'
        : status == 2
        ? 'Betting is over'
        : 'Match is about to begin'
    }}
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props: ['status', 'endTime'],
  data () {
    return {

    }
  },
  computed: {
    isEnd () {
      let endTime = this.endTime
      let oldTime = moment.utc().unix()
      if (oldTime > endTime) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.warp {
  width: 200px;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: 600;
}
.coming {
  background-color: #c4ffb4;
  color: #2a7f11;
}
.end {
  background: #aeaeae;
  color: #fff;
}
.will {
  background: green;
  color: red;
}
.suspend {
  background: yellow;
  color: #333;
}
</style>